<template>
	<view class="mainPage" :style="{backgroundImage: backgroundImg, backgroundPosition: backgroundPosition, backgroundRepeat:backgroundRepeat,backgroundSize:backgroundSize}">
	
	
		<view class="tab-nav">
			<view class="tab-nav-li" @tap="tabNav(index)" v-for="(item,index) in navList"
				:class="{'active':cur==index}">{{item.name}}</view>
		</view>
		<view class="screen-plate">
			<view class="screen-time">查询时间:{{currentTime}}</view>
			<view class="screen-time-option" @tap="openData"><u-image width="32rpx" height="32rpx"
					:src="appletImgUrl+'cate_tow.png'"></u-image>
				<view class="screen-time-label">筛选</view>
			</view>
		</view>
		<view class="total-box">
			<view class="title">收入：</view>
			<view class="money">{{totalCount}}</view>
		</view>
		<view class="data-list">
			<view class="list-li" v-for="(item,index) in recordList" :key="index">
				<view class="li-top">
					<view class="li-top-left">订单号：{{item.orderPayNumber}}</view>
					<view class="li-top-right" style="color: #E42548;font-weight: bold;">商家收入</view>
					
				</view>
				<view class="li-bottom">
					<view class="li-bottom-left">时间：{{item.payTime}}</view>
					<view class="li-bottom-right">{{item.price}}</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="status" />
		<u-calendar v-model="show" :mode="mode" @change="change"></u-calendar>
	</view>
</template>

<script>
	import {imgUrl,appletImgUrl} from "@/common/config.js"
	export default {
		data() {
			return {
				navList: [{
					name: "日"
				}, {
					name: "周"
				}, {
					name: "月"
				}],
				cur: 0,
				show: false,
				mode: "range",
				recordList: [],
				userInfo: {
					activateFee: 0,
					activatedIntegral: 0,
					buyPoints: 0,
					level: 1,
					levelName: "普通会员",
					mhbPoints: 0,
					mhbPrice: 0,
					partnerFee: 0,
					proPoints: 0,
					rewardIntegral: 0,
					userId: "",
					userPhoto: ""
				},
				queryData: {
					storeId: "",
					endTime: "",
					pageNo: 1,
					pageSize: 10,
					startTime: ""
				},
				public: {
					startTime: "",
					endTime: ""
				},
				type: "1",
				pageTotal: 1,
				status: "loadmore",
				user_info: {},
				currentTime:"",
				imgUrl:imgUrl,
				appletImgUrl:appletImgUrl,
				backgroundImg:'url('+appletImgUrl+'mihuiBg.png)',
				backgroundPosition:"left top",
				backgroundRepeat:"no-repeat",
				backgroundSize:"100%,auto",
				storeId:"",
				totalCount:0,
				count:0
				
			}
		},
		onLoad(option) {
			this.storeId=option.storeId;
			this.queryData.storeId=option.storeId;
			this.getTime();
			this.user_info = uni.getStorageSync('userInfo');
			console.log(this.user_info)
		},
		onShow() {
			this.queryData.pageNo = 1;
			this.recordList = [];
			this.getMihuiInfo();
			this.getMiHuiRecordList();
		},
		onReachBottom() {
			if (this.count>=10) {
				this.status = 'loading';
				this.queryData.pageNo++
				this.getMiHuiRecordList();
			} else {
				this.status = 'nomore'
			}

		},
		methods: {
			getTime() {
				let now = new Date();
				let year = now.getFullYear(); // 年
				let month = now.getMonth() + 1; // 月
				let date = now.getDate(); // 日
				var lastDate = new Date(year, month, 0).getDate(); //获取当月最后一日
				if (month < 10) {
					month = "0" + month;
				}
				if (date < 10) {
					date = "0" + date;
				}

				this.public.startTime = year + "-" + month + "-01" + " 00:00:00";
				this.public.endTime = year + "-" + month + "-" + lastDate + " 23:59:59";
				this.currentTime = year + "-" + month + "-01" + "至" + year + "-" + month + "-" + lastDate;


				this.queryData.startTime = this.public.startTime;
				this.queryData.endTime = this.public.endTime;

			},
			tabNav(i) {
				this.type = i + 1;
				this.cur = i;
				this.count=0;
				this.queryData.pageNo = 1;
				this.recordList = [];
				this.getMihuiInfo();
				this.getMiHuiRecordList();
			},
			openData() {
				this.show = true;
			},
			change(e) {
				console.log(e);
				this.public.startTime = e.startDate + ' ' + '00:00:00';
				this.public.endTime = e.endDate + ' ' + '23:59:59';
				this.queryData.startTime = this.public.startTime;
				this.queryData.endTime = this.public.endTime;
				this.currentTime = e.startDate + "至" + e.endDate;
				this.queryData.pageNo = 1;
				this.pageTotal=1;
				this.recordList = [];
				this.count=0;
				this.getMihuiInfo();
				this.getMiHuiRecordList();
			},
			getMihuiInfo() {
				this.$u.get('orderform/outline/sumStoreOutlinePay',{storeId:this.storeId,startTime:this.queryData.startTime,endTime:this.queryData.endTime}).then(res => {
					console.log(res);
					this.totalCount=res.totalCount;
				});
			},
			getMiHuiRecordList() {
				this.$u.post('orderform/outline/queryStoreOutlineOrderPage', this.queryData).then(res => {
					console.log(res);
					this.recordList = [...res.list, ...this.recordList];
					this.count=res.list.length;
					if(this.count>=10){
						this.status = 'loading';
					}else{
						this.status = 'nomore';
					}
					
				});
			},
			WithdrawalEvent(){
				uni.navigateTo({
					url: '/pages/user/withdrawal/withdrawal?currentEnableFee='+this.userInfo.rewardIntegral+'&typeIndex=4'
				});
			},
			activationEvent(){
				uni.navigateTo({
					url: '/pages/user/miHuiBao/activation?activateFee='+this.userInfo.activateFee
				});
			},
			realization(){
				uni.navigateTo({
					url: '/pages/user/miHuiBao/realization?mhbPointsFee='+this.userInfo.mhbPoints+'&mhbPrice='+this.userInfo.mhbPrice
				});
			}
		}
	}
</script>

<style lang="scss">
	.mainPage {
		
		//background: url("/static/mihuiBg.png");
		// background-position: left top !important;
		// background-repeat: no-repeat !important;
		padding-top: 30rpx;
	}

	.content {
		.myBalance {
			padding-top: 60rpx;
			padding-bottom: 40rpx;

			.name {
				font-size: 28rpx;
				text-align: center;
			}

			.amount {
				font-size: 72rpx;
				text-align: center;
				font-weight: bold;
				padding-top: 20rpx;
				padding-bottom: 20rpx;
			}

			.Withdrawal {
				width: 432rpx;
				height: 80rpx;
				line-height: 80rpx;
				background: linear-gradient(to right, #FFA858, #E42548);
				color: #fff;
				font-size: 32rpx;
				text-align: center;
				margin-left: 159rpx;
				border-radius: 200rpx;
			}

			.text {
				font-size: 24rpx;
				text-align: center;
				margin-top: 30rpx;
			}
		}

		.plate {
			padding-left: 30rpx;
			padding-right: 30rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.plate-li {
				width: 335rpx;
				background-color: #fff;
				border-radius: 20rpx;
				padding: 30rpx 20rpx;

				.plate-li-label {
					font-size: 24rpx;
				}

				.plate-li-amount {
					font-size: 40rpx;
					font-weight: bold;
					margin-top: 20rpx;
				}
			}
		}

		.plate-two {
			padding-left: 30rpx;
			padding-right: 30rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-top: 20rpx;

			.plate-li {
				width: 335rpx;
				background: linear-gradient(#FFA858, #E42548);
				border-radius: 20rpx;
				padding: 30rpx 20rpx;

				.plate-li-label {
					color: #fff;
					font-size: 24rpx;
				}

				.plate-li-amount {
					font-size: 40rpx;
					color: #fff;
					margin-top: 20rpx;
					margin-bottom: 20rpx;
					font-weight: bold;
				}

				.option {
					width: 120rpx;

					font-size: 24rpx;
					text-align: center;
					line-height: 56rpx;
					border-radius: 200rpx;
					background: #fff;
				}
			}
		}

	}

	.tab-nav {
		padding-left: 30rpx;
		padding-right: 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		

		.tab-nav-li {
			padding-left: 40rpx;
			padding-right: 40rpx;
			height: 80rpx;
			line-height: 80rpx;
			background-color: #F4F5F7;
			text-align: center;
			border-radius: 20rpx;
			margin-right: 20rpx;
		}

		.active {
			background: linear-gradient(to right, #FFA858, #E42548);
			color: #fff;
		}
	}

	.screen-plate {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-left: 30rpx;
		padding-right: 30rpx;
		margin-top: 40rpx;
		margin-bottom: 20rpx;

		.screen-time-option {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;

			.screen-time-label {
				margin-left: 10rpx;
			}
		}
	}

	.data-list {
		padding-left: 30rpx;
		padding-right: 30rpx;

		.list-li {
			padding: 20rpx;
			background: #F4F5F7;
			border-radius: 20rpx;
			margin-bottom: 20rpx;

			.li-top {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				margin-bottom: 10rpx;
			}

			.li-bottom {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}
		}
	}

	.old-content {
		
		margin-left: 30rpx;
		margin-right: 30rpx;
		border-radius: 20rpx;
		background-color: #fff;
		padding: 30rpx;
		.userinfo{
			
			border-bottom: 2rpx solid #ededed;
			padding-bottom: 20rpx;
			text-align: center;
			.user-sculpture{
				margin-right: 20rpx;
			}
			.name-box{
				text-align: center;
				.name{
					font-size: 72rpx;
					font-weight: bold;
				}
				.leve{
					font-size: 32rpx;
					color: #ccc;
					width: 376rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					background: linear-gradient(to right, #FFA858, #E42548);
					border-radius: 50rpx;
					margin-left: 126rpx;
					font-weight: bold;
				}
			}
		}
		.plate{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding-bottom: 20rpx;
			border-bottom: 2rpx solid #ededed;
			padding-top: 20rpx;
			.plate-li{
				width: 50%;
				padding-left: 20rpx;
				padding-right: 20rpx;
				
				.plate-li-top{
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					font-size: 24rpx;
					.plate-li-label{
						line-height: 40rpx;
					}
					.plate-li-btn{
						width: 80rpx;
						height: 40rpx;
						font-size: 20rpx;
						border-radius: 20rpx;
						text-align: center;
						background: linear-gradient(to right, #FFA858, #E42548);
						color: #fff;
						line-height: 40rpx;
					}
				}
				.plate-li-bottom{
					font-size: 36rpx;
					font-weight: bold;
					margin-top: 10rpx;
				}
			}
			.plate-li:nth-child(1){
				position: relative;
			}
			.plate-li:nth-child(1):after{
				display: block;
				content: "";
				width: 2rpx;
				background-color:#ededed;
				height:88rpx;
				position: absolute;
				top:0;
				right: 0;
			}
		}
	}
	.type-nav{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 20rpx;
		.type-nav-li{
			text-align: center;
			.type-nav-top{
				font-size: 28rpx;
				font-weight: bold;
			}
			.type-nav-bottom{
				font-size: 24rpx;
				color: #ccc;
			}
		}
	}
	.total-box{
		padding: 30rpx;
		background-color: #FF7200;
		font-size: 32rpx;
		color: #fff;
		margin-bottom: 20rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		border-radius: 20rpx;
	}
</style>